<template>
    <section style="padding: 10px 5px 5px 10px;overflow-y: auto;" :style="{height: tableHeight+'px'}">
        <div style="position: absolute; top: 20px; right: 20px;z-index: 10">
            <el-button size="small" class="el-icon-close" plain @click="closeBtn">
                退出
            </el-button>
            <el-button size="small" type="warning" class="el-icon-printer" v-print="'#printMe'" plain>
                打印
            </el-button>
            <el-button size="small" type="primary" class="el-icon-document-copy" plain @click="convertToImage" :loading="btnLoading">
                复制成图片
            </el-button>
        </div>
        <div id="printMe" ref="printMe">
            <div style="height: 65px;">
                <div style="padding-left: 40px;width: 366px;display: inline-block">
                    <el-image :src="logossy2" fit="contain" style="height: 60px;"></el-image>
                </div>
                <div style="text-align: center;width: 366px;display: inline-block;vertical-align: middle;margin-bottom: 40px;">
                    <div style="font-size: 24px;color: black;">加工厂核价单</div>
                </div>
                <div style="width: 366px;display: inline-block">
                    <div style="margin-left: 50%;margin-top: 40px;font-style: italic;">
                        打印时间{{formatDate(new Date().getTime())}}
                    </div>
                </div>
            </div>
            <div>
                <table border style="width: 100%;color: black;">
                    <tr style="color: black;">
                        <td>款号：</td>
                        <td>{{printData.editForm.style_number}}</td>
                        <td>款名：</td>
                        <td>{{printData.editForm.style}}</td>
                        <td>管理费率：</td>
                        <td>{{printData.editForm.f61}}</td>
                        <td>加工费用：</td>
                        <td>{{parseFloat(printData.editForm.f72)}}</td>
                        <td rowspan="2" style="width: 30px;text-align: center;">款式图片</td>
                        <td rowspan="2" style="width: 160px;">
                            <el-image :src="printData.editForm.img_64" fit="cover" style="height: 100%;"></el-image>
                        </td>
                    </tr>
                    <tr style="color: black;">
                        <td>款式颜色：</td>
                        <td>{{printData.editForm.colour}}</td>
                        <td>品类：</td>
                        <td>{{printData.editForm.product_category}}</td>
                        <td>成衣成本：</td>
                        <td>{{parseFloat(printData.editForm.f64)}}</td>
                        <td>成衣加价成本：</td>
                        <td>{{parseFloat(printData.editForm.f65)}}</td>
                    </tr>
                    <tr style="color: black;">
                        <td>备注：</td>
                        <td colspan="9">{{printData.editForm.comment}}</td>
                    </tr>
                </table>
                <table border style="width: 100%;">
                    <tr style="font-weight: bold">
                        <td colspan="10" style="text-align: center;background-color: #dcdee2;font-size: 14px;">主料</td>
                    </tr>
                    <tr>
                        <td>物料名称</td>
                        <td>单位</td>
                        <td>属性</td>
                        <td>供应商</td>
                        <td>价格</td>
                        <td>单耗</td>
                        <td>损耗</td>
                        <td>总价</td>
                        <td>加价率(%)</td>
                        <td>加价金额</td>
                    </tr>
                    <tr v-for="(bomItem, index) in printData.editBomList" :key="index" v-if="bomItem.materiel_major_category=='主料'">
                        <td>{{bomItem.materiel}}</td>
                        <td>{{bomItem.materiel_major_unit}}</td>
                        <td>{{bomItem.materiel_attribute}}</td>
                        <td>{{bomItem.supplier}}</td>
                        <td>{{bomItem.price}}</td>
                        <td>{{bomItem.amount}}</td>
                        <td>{{bomItem.f56}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)).toFixed(10)).toFixed(4))}}</td>
                        <td>{{bomItem.f57}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)*Number(bomItem.f57)/100).toFixed(10)).toFixed(4))}}</td>
                    </tr>
                    <tr>
                        <td colspan="7" style="text-align: right">主料总价：</td>
                        <td>{{parseFloat(printData.editForm.f69)}}</td>
                    </tr>
                    <tr style="font-weight: bold">
                        <td colspan="11" style="text-align: center;background-color: #dcdee2;font-size: 14px;">辅料</td>
                    </tr>
                    <tr>
                        <td>物料名称</td>
                        <td>单位</td>
                        <td>属性</td>
                        <td>供应商</td>
                        <td>价格</td>
                        <td>单耗</td>
                        <td>损耗</td>
                        <td>总价</td>
                        <td>加价率(%)</td>
                        <td>加价金额</td>
                    </tr>
                    <tr v-for="(bomItem, index) in printData.editBomList" :key="index" v-if="bomItem.materiel_major_category=='辅料'">
                        <td>{{bomItem.materiel}}</td>
                        <td>{{bomItem.materiel_major_unit}}</td>
                        <td>{{bomItem.materiel_attribute}}</td>
                        <td>{{bomItem.supplier}}</td>
                        <td>{{bomItem.price}}</td>
                        <td>{{bomItem.amount}}</td>
                        <td>{{bomItem.f56}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)).toFixed(10)).toFixed(4))}}</td>
                        <td>{{bomItem.f57}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)*Number(bomItem.f57)/100).toFixed(10)).toFixed(4))}}</td>
                    </tr>
                    <tr>
                        <td colspan="7" style="text-align: right">辅料总价：</td>
                        <td>{{parseFloat(printData.editForm.f70)}}</td>
                    </tr>
                    <tr style="font-weight: bold">
                        <td colspan="11" style="text-align: center;background-color: #dcdee2;font-size: 14px;">特殊工艺</td>
                    </tr>
                    <tr>
                        <td>物料名称</td>
                        <td>单位</td>
                        <td>属性</td>
                        <td>供应商</td>
                        <td>价格</td>
                        <td>单耗</td>
                        <td>损耗</td>
                        <td>总价</td>
                        <td>加价率(%)</td>
                        <td>加价金额</td>
                    </tr>
                    <tr v-for="(bomItem, index) in printData.editBomList" :key="index" v-if="bomItem.materiel_major_category=='特殊工艺'">
                        <td>{{bomItem.materiel}}</td>
                        <td>{{bomItem.materiel_major_unit}}</td>
                        <td>{{bomItem.materiel_attribute}}</td>
                        <td>{{bomItem.supplier}}</td>
                        <td>{{bomItem.price}}</td>
                        <td>{{bomItem.amount}}</td>
                        <td>{{bomItem.f56}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)).toFixed(10)).toFixed(4))}}</td>
                        <td>{{bomItem.f57}}</td>
                        <td>{{parseFloat(parseFloat((Number(bomItem.price)*Number(bomItem.amount)*Number(bomItem.f56)*Number(bomItem.f57)/100).toFixed(10)).toFixed(4))}}</td>
                    </tr>
                    <tr>
                        <td colspan="7" style="text-align: right">特殊工艺总价：</td>
                        <td>{{parseFloat(printData.editForm.f71)}}</td>
                    </tr>
                </table>
                <table border style="width: 100%;">
                    <tr style="font-weight: bold">
                        <td colspan="11" style="text-align: center;background-color: #dcdee2;font-size: 14px;">加工项目</td>
                    </tr>
                    <tr>
                        <td>费用类型</td>
                        <td>数量</td>
                        <td>价格</td>
                        <td>总价</td>
                        <td>加价率(%)</td>
                        <td>加价金额</td>
                    </tr>
                    <tr v-for="(item, index) in printData.editItemList" :key="index">
                        <td>
                            <span  v-for="(row, index) in verifyTypeList" :key="index" v-if="item.price_type_id == row.id">
                                {{row.name}}
                            </span>
                        </td>
                        <td>{{item.count}}</td>
                        <td>{{item.price}}</td>
                        <td>{{parseFloat(parseFloat((Number(item.price) * Number(item.count)).toFixed(10)).toFixed(4))}}</td>
                        <td>{{item.f58}}</td>
                        <td>{{parseFloat(parseFloat((Number(item.price) * Number(item.count) * Number(item.f58) / 100).toFixed(10)).toFixed(4))}}</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align: right">加工项目总费用：</td>
                        <td>{{parseFloat(itemPrice)}}</td>
                        <td style="text-align: right">加工项目加价总费用：</td>
                        <td>{{parseFloat(itemPricePlus)}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</template>

<script>
import logossy2 from "@/assets/images/logossy2.png";
import {formatDate, copy} from "../../../../libs/tools";
import html2canvas from "html2canvas";

export default {
    name: "printSupplier",
    props: {
        verifyTypeList: {
            type: Array,
            default: []
        },
        printData:{
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            logossy2,
            tableHeight: window.innerHeight,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],
            formatDate,

            itemPrice: 0,
            itemPricePlus:0,

            imageUrl: "",
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        closeBtn(){
            this.$emit("close-btn");
        },
        async convertToImage(){
            this.btnLoading = true;
            try {
                // 等待 DOM 更新
                await this.$nextTick();
                // 将 DOM 转换为 Canvas
                const canvas = await html2canvas(this.$refs.printMe, {
                    scale: 3,                // 提高图片清晰度
                    useCORS: true,           // 处理跨域图片
                    logging: false,          // 关闭日志
                    //backgroundColor: null,   // 保持透明背景（如果需要）
                });
                // 方法 1：直接从 Canvas 复制（推荐）
                await this.copyCanvasToClipboard(canvas);
                this.isCopied = true;
                setTimeout(() => this.isCopied = false, 2000);
                // // 将 Canvas 转换为图片 URL
                // this.imageUrl = canvas.toDataURL('image/png');
                // // 调试输出（非常重要！）
                // console.log('imageUrl:', this.imageUrl); // 检查控制台是否显示完整的 base64 数据
                 this.btnLoading = false;
                 this.$message.success("图片复制成功");
            } catch (error) {
                this.btnLoading = false;
                this.$message.error('转换失败:'+error);
            }
        },
        // 方法 1：直接从 Canvas 复制
        async copyCanvasToClipboard(canvas) {
            // 将 Canvas 转为 Blob
            const blob = await new Promise(resolve => {
                canvas.toBlob(resolve, 'image/png');
            });
            // 复制到剪贴板
            await navigator.clipboard.write([
                new ClipboardItem({ 'image/png': blob })
            ]);
        },
    },
    mounted() {
        this.itemPrice = 0
        this.printData.editItemList.forEach(item => {
            this.itemPrice += parseFloat(parseFloat((Number(item.price) * Number(item.count)).toFixed(10)).toFixed(4));
        });
        this.itemPricePlus = 0;
        this.printData.editItemList.forEach(item => {
            this.itemPricePlus += parseFloat(parseFloat((Number(item.price) * Number(item.count) * Number(item.f58) /100).toFixed(10)).toFixed(4));
        });
    }
}
</script>

<style scoped>
@page {
    size: auto;
    margin: 0;
}
#printMe{
    width: 1100px;
    padding-top: 30px;
    margin-left: 40px;
}

table, th, td {
    border: 1px solid #909399;
    border-collapse: collapse; /* 移除单元格之间的间隔 */
    padding: 6px;
}
</style>
